<template>
	<view class="pa-12">
		<view v-if="Object.keys(my).length" class="item_box bg_jb flex flex-ai-center flex-js-sb">
			<view class="flex flex-ai-center" style="width: 80%;">
				<view class="paiming_number font-color-666 font-size-14 text-center">{{my.order_num}}</view>
				<u-avatar class="mlr-8" :src="$ossUrl + userInfo.avatar" size='30'></u-avatar>
				<view class="flex flex-ai-center">
					<view class="benren mr-4">本人</view>
					<view class="font-color-black">{{my.mobile}}</view>
				</view>
			</view>
			<view class="font-color-black text-right valueData">{{type == 1?my.yao_count:type == 1?my.buy_collection_total_price:''}}</view>
		</view>
		<view class="item_box flex flex-ai-center flex-js-sb" v-for="(item,index) in list" :key="index">
			<view class="flex flex-ai-center" style="width: 80%;">
				<view class="paiming_number font-color-666 font-size-14 text-center">{{index + 4}}</view>
				<u-avatar class="mlr-8" :src="$ossUrl + item.avatar" size='30'></u-avatar>
				<view class="font-color-black">{{item.nickname.slice(0,16)}}</view>
			</view>
			<view class="font-color-black text-right valueData">{{type == 1?item.yao_count:type == 3?'￥'+ item.buy_collection_total_price:''}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default:() => {
					return []
				}
			},
			my:{
				type:Object,
				default:() => {
					return {}
				}
			},
			type:{
				type:Number,
				default:3
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg_jb {
		background: linear-gradient(90deg, #91EDF3 0%, rgba(145,243,243,0) 100%);
	}
	.item_box {
		width: 100%;
		border-radius: 16rpx;
		padding: 20rpx 32rpx;
	}
	.paiming_number {
		width: 20%;
	}
	.avatar_box {
		width: 20%;
	}
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}
	.valueData {
		width: 30%;
	}
	.benren {
		width: 88rpx;
		height: 40rpx;
		background: $theme-jb-color;
		border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
		color: #fff;
		text-align: center;
		line-height: 40rpx;
	}
</style>